import React from 'react';
import styled from 'styled-components';

const ScH1 = styled.h1.attrs(props=>({
  color: props.color || 'black'
}))`
    color: ${props=>props.color};
    background-color: blue;
    text-align: center;
    padding: 10px;
`;

// 通过使用 props.theme 可以访问到 ThemeProvider 传递下来的对象
const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
  color: ${props => props.theme.main};
  border: 2px solid ${props => props.theme.main};
`;

// 为 Button 指定默认的主题
Button.defaultProps = {
  theme: {
    main: "palevioletred"
  }
}

const theme = {
  main: "mediumseagreen"
};

// render(
//   <div>
//     <Button>Normal</Button>
//     // 采用了 ThemeProvider 提供的主题的 Button
//     <ThemeProvider theme={theme}>
//       <Button>Themed</Button>
//     </ThemeProvider>
//   </div>
// );


export default ScH1